fashion-ssr-vue3/pages/orders/[id].vue

<!-- @format -->

<script lang="ts" setup>
import dayjs from 'dayjs'
import { getOrderDetailApi } from '@/api/model/order'
import { downloadFileByA } from '@/utils/common/download'

const detail = ref()
const visible = ref(false)
const curProduct = ref()
const totalQuantity = computed(() => {
  let total = 0
  if (!detail.value)
    return total
  detail.value.merchandises.forEach((item: any) => {
    total += item.quantity
  })
  return total
})
const totalPrice = computed(() => {
  let total = 0
  if (!detail.value)
    return total
  detail.value.merchandises.forEach((item: any) => {
    total += item.subTotalPrice
  })
  return total.toFixed(2)
})
async function getOrderDetail() {
  try {
    const id = useRoute().params.id
    const res: any = await getOrderDetailApi({ id })
    detail.value = res
  }
  catch (error) {
    console.log(error)
  }
}
function onCancelSubmit() {
  console.log('cancel')
}
function openRemark(row: any) {
  if (row.file) {
    const fileArr = row.file.split(',')
    curProduct.value = { ...row, ...{ file: fileArr } }
  }
  visible.value = true
}
function getFileTitle(file: string) {
  const fileArr = file.split('/')
  return fileArr[fileArr.length - 1]
}
getOrderDetail()
</script>

<template>
  <div>
    <div class="w-1400px mx-auto pt-40px pb-220px">
      <div
        class="fw-700 text-#333 text-24px text-#111 mb-30px flex justify-between items-center"
      >
        <div>Wish order detail ({{ detail?.billNo }})</div>
        <el-button
          v-if="detail?.state === 1"
          class="!bg-#C58C64 !text-#fff !ml-0 !w-172px !h-42px !text-14px !fw-500 !b-rd-6px"
          @click="onCancelSubmit"
        >
          Cancel Wish order
        </el-button>
      </div>
      <div class="flex gap-56px text-#666">
        <div>No： {{ detail?.billNo }}</div>
        <div>
          Date： {{ dayjs(detail?.createTime).format("YYYY-MM-DD hh:mm:ss") }}
        </div>
        <div>
          Status：
          <span class="text-#0068FF fw-500">
            {{ detail?.state === 1 ? "Submitted" : "Cancelled" }}</span>
        </div>
        <!-- <div>Order Total：  {{ numberToTwoDecimals(detail?.totalPrice) }} USD</div> -->
      </div>
      <div class="mt-34px mb-28px">
        <div
          class="w-full py-24px px-16px b-dashed b-1px b-#E0E0E0 b-rd-4px    "
        >
          <div v-if="detail?.quote">
            <div class="fw-700   text-#3D3D3D">
              Quotation for product
            </div>
            <div class="mt-20px mb-28px">
              <div v-for="item in detail?.quote?.attachments" :key="item.id" class="py-4px underline cursor-pointer" @click="downloadFileByA(item.fileUrl, item.fileName)">
                {{ getFileTitle(item.fileUrl) }}
              </div>
            </div>
            <div class="fw-700 my-20px  text-#3D3D3D">
              Remark
            </div>
            <div class="text-#333">
              {{ detail?.quote?.remark }}
            </div>
          </div>
          <div v-else class="flex justify-center items-center">
            <svgo-quotation class="!w-28px !h-28px mr-14px" />
            No quotation yet
          </div>
        </div>
      </div>
      <div>
        <div class="fw-500 text-24px text-#333 mb-20px">
          Product
        </div>
        <div class="overflow-y-auto">
          <el-table :data="detail?.merchandises" style="width: 100%">
            <el-table-column prop="title" label="Product" width="300">
              <template #default="{ row }">
                <div class="flex items-center">
                  <el-image
                    style="width: 56px; height: 56px; margin-right: 16px"
                    :src="row.masterImage.split(',')[0]"
                    fit="cover"
                  />
                  <div class="w-180px line-clamp-2">
                    {{ row.title }}
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="brandName" label="Item No." width="180" />
            <el-table-column prop="quantity" label="Quantity" />
            <el-table-column prop="unitPrice" label="UnitPrice" />
            <el-table-column prop="subTotalPrice" label="Total" />
            <el-table-column label="Remark">
              <template #default="{ row }">
                <svgo-remark
                  class="!w-24px cursor-pointer !h-24px text-#0068FF"
                  @click="openRemark(row)"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="py-30px px-40px b-1px b-solid b-#E0E0E0 bg-#F7F8FA flex justify-end text-14px">
          Product Quantity <span class="fw-500">&nbsp; {{ totalQuantity }}</span>&nbsp;&nbsp;&nbsp;  Total Price USD<span class="fw-500">&nbsp; {{ totalPrice }}</span>
        </div>
        <!-- <div class="mt-25px flex justify-end">
           <el-pagination
                v-model:current-page="currentPage"
                :page-size="page_size"
                :pager-count="10"
                layout="prev, pager, next" :total="total"
                @change="changePage"
              />
        </div> -->
      </div>
    </div>
    <business-account-orders-remark-modal
      v-if="visible"
      v-model:visible="visible"
      v-model:product="curProduct"
      :order-id="detail.id"
    />
    <common-footer-guide />
  </div>
</template>

<style lang="less" scoped>
::v-deep(.el-table) {
  color: #333;

  .el-table__header-wrapper {
    .el-table__header {
      height: 50px;

      .el-table__cell {
        color: #333;
        font-weight: 400 !important;
        background-color: #fff2e1;
      }
    }
  }

  .el-table__row {
    height: 68px;

    &.warning-row {
      --el-table-tr-bg-color: #f7f7f7;
    }
  }
}
</style>